<template>
    <div>


        <input type="file" accept="image/jpeg,image/png,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" ref="f1" @click="onSelectFile" @change="onFileChange" style="display: none;" multiple>

        <input type="file" accept="image/jpeg,image/png,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" ref="f2" @click="onSelectOtherFile" @change="onOtherFileChange" style="display: none;" multiple>

        <el-card class="box-card ">
            <div slot="header" class="clearfix">
                <span class="card-header">其他资料   <el-button size="mini" type="primary"  @click.stop="addOtherPic()">选择文件</el-button> </span>
                <el-form ref="trialFile" :model="$data"  >

                    <div style="margin:10px 0;color: red;font-size: 20px">
                        请在此处上传相关资料，例如保全申请书等,支持图片，word和PDF文件
                    </div>

                    <div style="margin-bottom: 10px ">
                        <div style="color: red;font-size: 18px" v-for="v in onRenderOtherTip()" :key="v.key">
                            缺少：{{ v.value }}
                        </div>
                    </div>
                    <el-table :data="trialFile" :show-header="false" :border="true">
                        <el-table-column  >
                            <template slot-scope="tf">
                                <div class="p-flex" >
                                    <div style="width: 2rem">{{ tf.$index+1 }}</div>
                                    <div >
                                        <el-image style="width:4rem;height: 4rem" fit="cover" :src="tf.row.b64"   ></el-image>
                                    </div>
                                    <div>
                                        <el-select @change="renderList(...arguments,tf,tf.$index,'trialFile')" v-model="tf.row.type" :prop="tf.$index+'.type'" :rules="{required:true,message:'请选择文件的类型',trigger:'blur'}">
                                            <el-option v-for="v in filetype" :key="v.value" :label="v.value" :value="v.key"></el-option>
                                        </el-select>
                                    </div>

                                    <div >
                                        <el-button size="mini" type="danger" @click="unselectOtherImage(tf.$index)">删除</el-button>
                                    </div>
                                </div>


                            </template>
                        </el-table-column >

                    </el-table>
                </el-form>
            </div>
        </el-card>


        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="card-header">保全财产信息</span>
                <el-dropdown class="card-header-right-item" @command="handleAddBqCommand">
                    <el-button size="mini" type="primary">填写保全标的<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown" >
                        <el-dropdown-item :command="1">房产</el-dropdown-item>
                        <el-dropdown-item :command="2"> 车辆</el-dropdown-item>
                        <el-dropdown-item :command="3">银行</el-dropdown-item>
                        <el-dropdown-item :command="4">动产</el-dropdown-item>
                        <el-dropdown-item :command="5">股权</el-dropdown-item>
                        <el-dropdown-item :command="7">第三人债权</el-dropdown-item>

                    </el-dropdown-menu>
                </el-dropdown>
            </div>

            <el-form   ref="bqList" :model="$data" label-width="auto" :rules="rules">


                <el-table :border="true" :data="bqList" :show-header="false">

                    <el-table-column label="财产信息" >
                        <template slot-scope="scope">
                            <el-form-item  style="font-weight: bold"  :label="(scope.$index+1)+'.'+getTypeStr(scope.row.type)">

                                <el-button  size="mini" type="danger" @click="removeItem('bqList',scope.row,scope.$index)">删除</el-button>
                            </el-form-item>
                            <div v-if="scope.row.type === 1">
                                <el-form-item label="权属人"  :prop="'bqList.'+scope.$index+'.QSR'" :rules="rules.QSR">
                                    <el-select
                                            v-model="scope.row.QSR"
                                            filterable
                                            allow-create
                                            default-first-option
                                            @blur="onInputQSR(...arguments ,scope.row,false)"
                                            placeholder="请选择或输入权属人">
                                        <el-option
                                                v-for="item in bgList"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="坐落"  :prop="'bqList.'+scope.$index+'.content.ZL'"  :rules="rules.ZL">
                                    <el-input v-model="scope.row.content.ZL"></el-input>
                                </el-form-item>

                                <el-form-item label="房产权证号"  :prop="'bqList.'+scope.$index+'.content.QZHM'"  :rules="rules.QZHM">
                                    <el-input v-model="scope.row.content.QZHM"></el-input>
                                </el-form-item>

                                <el-form-item label="份额占比"  :prop="'bqList.'+scope.$index+'.content.FEZB'"  :rules="rules.FEZB">
                                    <el-input v-model="scope.row.content.FEZB" placeholder="请输入份额百分比（如：20%应输入20 ）或共同拥有"></el-input>
                                </el-form-item>


                                <el-form-item label="保全类型"  :prop="'bqList.'+scope.$index+'.bqlx'" :rules="rules.bqlx">
                                    <el-radio-group v-model="scope.row.bqlx" @change="onBqlxChange(...arguments,scope.row)">
                                        <el-radio :label="1">查封/冻结</el-radio>
                                        <el-radio :label="2">解除</el-radio>
                                        <el-radio :label="3">续封/续冻</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item v-if="scope.row.bqlx === 3" label="续封到期日"  :prop="'bqList.'+scope.$index+'.xfdqr'"  :rules="rules.xfdqr">
                                    <el-date-picker
                                            v-model="scope.row.xfdqr"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>


                                <el-form-item label="线索附件" style="margin-bottom: 0">
                                    <div >
                                        <el-button type="primary" size="mini"  @click.stop="addPic('bqList',scope.$index)">选择文件</el-button>
                                        <p style="color: red;font-size: 1.5rem">
                                        请在此处上传该标的的线索资料
                                        </p>
                                    </div>

                                    <div>
                                        <div style="color: red" v-for="v in onRenderTip(scope.$index,'bqList')" :key="v.key">
                                            缺少：{{ v.value }}
                                        </div>
                                    </div>

                                </el-form-item>
                                <el-table :data="scope.row.imgUrls" :show-header="false" :border="false">
                                    <el-table-column >
                                        <template slot-scope="tf">
                                            <div class="p-flex">
                                                <div style="width: 2rem">{{ tf.$index+1 }}</div>
                                                <div>
                                                    <el-image style="width:4rem;height: 4rem" fit="cover" :src="tf.row.b64"   ></el-image>
                                                </div>
                                                <div>
                                                    <el-select @change="renderList(...arguments,tf,scope.$index,'bqList')" v-model="tf.row.type" :prop="'bqList.'+scope.$index+'imgUrls.'+tf.$index+'.type'" :rules="{required:true,message:'请选择文件的类型',trigger:'blur'}">
                                                        <el-option v-for="v in filetype" :key="v.value" :label="v.value" :value="v.key"></el-option>
                                                    </el-select>
                                                </div>
                                                <div>
                                                    <el-button size="mini" type="danger" @click="unselectimage(tf.$index,tf.row,scope.$index,'bqList')">删除</el-button>
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column >


                                </el-table>

                            </div>
                            <div v-else-if="scope.row.type === 2">
                                <el-form-item label="权属人"  :prop="'bqList.'+scope.$index+'.QSR'" :rules="rules.QSR">
                                    <el-select
                                            v-model="scope.row.QSR"
                                            filterable
                                            allow-create
                                            default-first-option
                                            @blur="onInputQSR(...arguments ,scope.row,false)"
                                            placeholder="请选择或输入权属人">
                                        <el-option
                                                v-for="item in bgList"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="车辆品牌" >
                                    <el-input v-model="scope.row.content.CLPP" placeholder="例：上汽通用别克请输入 别克牌"></el-input>
                                </el-form-item>

                                <el-form-item label="车牌号码"  :prop="'bqList.'+scope.$index+'.content.CLHM'" :rules="rules.CLHM">
                                    <el-input v-model="scope.row.content.CLHM"></el-input>
                                </el-form-item>


                                <el-form-item label="保全类型"  :prop="'bqList.'+scope.$index+'.bqlx'" :rules="rules.bqlx">
                                    <el-radio-group v-model="scope.row.bqlx" @change="onBqlxChange(...arguments,scope.row)">
                                        <el-radio :label="1">查封/冻结</el-radio>
                                        <el-radio :label="2">解除</el-radio>
                                        <el-radio :label="3">续封/续冻</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item v-if="scope.row.bqlx === 3" label="续封到期日"  :prop="'bqList.'+scope.$index+'.xfdqr'"  :rules="rules.xfdqr">
                                    <el-date-picker
                                            v-model="scope.row.xfdqr"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>


                                <el-form-item label="线索附件" style="margin-bottom: 0">
                                    <div >
                                        <el-button type="primary" size="mini"  @click.stop="addPic('bqList',scope.$index)">选择文件</el-button>
                                        <p style="color: red;font-size: 1.5rem">
                                            请在此处上传该标的的线索资料
                                        </p>
                                    </div>

                                    <div>
                                        <div style="color: red" v-for="v in onRenderTip(scope.$index,'bqList')" :key="v.key">
                                            缺少：{{ v.value }}
                                        </div>
                                    </div>

                                </el-form-item>
                                <el-table :data="scope.row.imgUrls" :show-header="false" :border="false">
                                    <el-table-column >
                                        <template slot-scope="tf">
                                            <div class="p-flex">
                                                <div style="width: 2rem">{{ tf.$index+1 }}</div>
                                                <div>
                                                    <el-image style="width:4rem;height: 4rem" fit="cover" :src="tf.row.b64"   ></el-image>
                                                </div>
                                                <div>
                                                    <el-select @change="renderList(...arguments,tf,scope.$index,'bqList')" v-model="tf.row.type" :prop="'bqList.'+scope.$index+'imgUrls.'+tf.$index+'.type'" :rules="{required:true,message:'请选择文件的类型',trigger:'blur'}">
                                                        <el-option v-for="v in filetype" :key="v.value" :label="v.value" :value="v.key"></el-option>
                                                    </el-select>
                                                </div>
                                                <div>
                                                    <el-button size="mini" type="danger" @click="unselectimage(tf.$index,tf.row,scope.$index,'bqList')">删除</el-button>
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column >


                                </el-table>
                            </div>
                            <div v-else-if="scope.row.type === 3">
                                <el-form-item label="权属人"  :prop="'bqList.'+scope.$index+'.QSR'" :rules="rules.QSR">
                                    <el-select
                                            v-model="scope.row.QSR"
                                            filterable
                                            allow-create
                                            default-first-option
                                            @blur="onInputQSR(...arguments ,scope.row,false)"
                                            placeholder="请选择或输入权属人">
                                        <el-option
                                                v-for="item in bgList"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>


                                <el-form-item label="银行账户"  :prop="'bqList.'+scope.$index+'.content.KHZH'" :rules="rules.KHZH">
                                    <el-input v-model="scope.row.content.KHZH"></el-input>
                                </el-form-item>

                                <el-form-item label="开户行"  :prop="'bqList.'+scope.$index+'.content.KHH'" :rules="rules.KHH">
                                    <el-input v-model="scope.row.content.KHH"></el-input>

                                </el-form-item>

                                <el-form-item label="冻结金额"  :prop="'bqList.'+scope.$index+'.content.DJJE'" :rules="rules.DJJE">
                                    <el-input v-model="scope.row.content.DJJE" type="number">
                                        <template slot="suffix">元</template>
                                    </el-input>
                                </el-form-item>


                                <el-form-item label="保全类型"  :prop="'bqList.'+scope.$index+'.bqlx'" :rules="rules.bqlx">
                                    <el-radio-group v-model="scope.row.bqlx" @change="onBqlxChange(...arguments,scope.row)">
                                        <el-radio :label="1">查封/冻结</el-radio>
                                        <el-radio :label="2">解除</el-radio>
                                        <el-radio :label="3">续封/续冻</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item v-if="scope.row.bqlx === 3" label="续封到期日"  :prop="'bqList.'+scope.$index+'.xfdqr'"  :rules="rules.xfdqr">
                                    <el-date-picker
                                            v-model="scope.row.xfdqr"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>


                                <el-form-item label="线索附件" style="margin-bottom: 0">
                                    <div >
                                        <el-button type="primary" size="mini"  @click.stop="addPic('bqList',scope.$index)">选择文件</el-button>
                                        <p style="color: red;font-size: 1.5rem">
                                            请在此处上传该标的的线索资料
                                        </p>
                                    </div>

                                    <div>
                                        <div style="color: red" v-for="v in onRenderTip(scope.$index,'bqList')" :key="v.key">
                                            缺少：{{ v.value }}
                                        </div>
                                    </div>

                                </el-form-item>
                                <el-table :data="scope.row.imgUrls" :show-header="false" :border="false">
                                    <el-table-column >
                                        <template slot-scope="tf">
                                            <div class="p-flex">
                                                <div style="width: 2rem">{{ tf.$index+1 }}</div>
                                                <div>
                                                    <el-image style="width:4rem;height: 4rem" fit="cover" :src="tf.row.b64"   ></el-image>
                                                </div>
                                                <div>
                                                    <el-select @change="renderList(...arguments,tf,scope.$index,'bqList')" v-model="tf.row.type" :prop="'bqList.'+scope.$index+'imgUrls.'+tf.$index+'.type'" :rules="{required:true,message:'请选择文件的类型',trigger:'blur'}">
                                                        <el-option v-for="v in filetype" :key="v.value" :label="v.value" :value="v.key"></el-option>
                                                    </el-select>
                                                </div>
                                                <div>
                                                    <el-button size="mini" type="danger" @click="unselectimage(tf.$index,tf.row,scope.$index,'bqList')">删除</el-button>
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column >


                                </el-table>
                            </div>

                            <div v-else-if="scope.row.type === 4">
                                <el-form-item label="权属人"  :prop="'bqList.'+scope.$index+'.QSR'" :rules="rules.QSR">
                                    <el-select
                                            v-model="scope.row.QSR"
                                            filterable
                                            allow-create
                                            default-first-option
                                            @blur="onInputQSR(...arguments ,scope.row,false)"
                                            placeholder="请选择或输入权属人">
                                        <el-option
                                                v-for="item in bgList"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="具体内容"  :prop="'bqList.'+scope.$index+'.content.CCMC'" :rules="rules.CCMC">
                                    <el-input type="textarea" v-model="scope.row.content.CCMC"></el-input>
                                </el-form-item>



                                <el-form-item label="保全类型"  :prop="'bqList.'+scope.$index+'.bqlx'" :rules="rules.bqlx">
                                    <el-radio-group v-model="scope.row.bqlx" @change="onBqlxChange(...arguments,scope.row)">
                                        <el-radio :label="1">查封/冻结</el-radio>
                                        <el-radio :label="2">解除</el-radio>
                                        <el-radio :label="3">续封/续冻</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item v-if="scope.row.bqlx === 3" label="续封到期日"  :prop="'bqList.'+scope.$index+'.xfdqr'"  :rules="rules.xfdqr">
                                    <el-date-picker
                                            v-model="scope.row.xfdqr"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>


                                <el-form-item label="线索附件" style="margin-bottom: 0">
                                    <div >
                                        <el-button type="primary" size="mini"  @click.stop="addPic('bqList',scope.$index)">选择文件</el-button>
                                        <p style="color: red;font-size: 1.5rem">
                                            请在此处上传该标的的线索资料
                                        </p>
                                    </div>

                                    <div>
                                        <div style="color: red" v-for="v in onRenderTip(scope.$index,'bqList')" :key="v.key">
                                            缺少：{{ v.value }}
                                        </div>
                                    </div>

                                </el-form-item>
                                <el-table :data="scope.row.imgUrls" :show-header="false" :border="false">
                                    <el-table-column >
                                        <template slot-scope="tf">
                                            <div class="p-flex">
                                                <div style="width: 2rem">{{ tf.$index+1 }}</div>
                                                <div>
                                                    <el-image style="width:4rem;height: 4rem" fit="cover" :src="tf.row.b64"   ></el-image>
                                                </div>
                                                <div>
                                                    <el-select @change="renderList(...arguments,tf,scope.$index,'bqList')" v-model="tf.row.type" :prop="'bqList.'+scope.$index+'imgUrls.'+tf.$index+'.type'" :rules="{required:true,message:'请选择文件的类型',trigger:'blur'}">
                                                        <el-option v-for="v in filetype" :key="v.value" :label="v.value" :value="v.key"></el-option>
                                                    </el-select>
                                                </div>
                                                <div>
                                                    <el-button size="mini" type="danger" @click="unselectimage(tf.$index,tf.row,scope.$index,'bqList')">删除</el-button>
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column >


                                </el-table>
                            </div>

                            <div v-else-if="scope.row.type === 5">
                                <el-form-item label="权属人"  :prop="'bqList.'+scope.$index+'.QSR'" :rules="rules.QSR">
                                    <el-select
                                            v-model="scope.row.QSR"
                                            @blur="onInputQSR(...arguments ,scope.row,false)"
                                            filterable
                                            allow-create
                                            default-first-option
                                            placeholder="请选择或输入权属人">
                                        <el-option
                                                v-for="item in bgList"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="企业名称"  :prop="'bqList.'+scope.$index+'.content.QYMC'" :rules="rules.QYMC">
                                    <el-input v-model="scope.row.content.QYMC"></el-input>
                                </el-form-item>

                                <el-form-item label="冻结比例"  :prop="'bqList.'+scope.$index+'.content.DJBL'" :rules="rules.DJBL" >
                                    <el-input v-model="scope.row.content.DJBL" type="number" >
                                        <template slot="suffix">%</template>
                                    </el-input>
                                </el-form-item>


                                <el-form-item label="保全类型"  :prop="'bqList.'+scope.$index+'.bqlx'" :rules="rules.bqlx">
                                    <el-radio-group v-model="scope.row.bqlx" @change="onBqlxChange(...arguments,scope.row)">
                                        <el-radio :label="1">查封/冻结</el-radio>
                                        <el-radio :label="2">解除</el-radio>
                                        <el-radio :label="3">续封/续冻</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item v-if="scope.row.bqlx === 3" label="续封到期日"  :prop="'bqList.'+scope.$index+'.xfdqr'"  :rules="rules.xfdqr">
                                    <el-date-picker
                                            v-model="scope.row.xfdqr"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>


                                <el-form-item label="线索附件" style="margin-bottom: 0">
                                    <div >
                                        <el-button type="primary" size="mini"  @click.stop="addPic('bqList',scope.$index)">选择文件</el-button>
                                        <p style="color: red;font-size: 1.5rem">
                                            请在此处上传该标的的线索资料
                                        </p>
                                    </div>

                                    <div>
                                        <div style="color: red" v-for="v in onRenderTip(scope.$index,'bqList')" :key="v.key">
                                            缺少：{{ v.value }}
                                        </div>
                                    </div>

                                </el-form-item>
                                <el-table :data="scope.row.imgUrls" :show-header="false" :border="false">
                                    <el-table-column >
                                        <template slot-scope="tf">
                                            <div class="p-flex">
                                                <div style="width: 2rem">{{ tf.$index+1 }}</div>
                                                <div>
                                                    <el-image style="width:4rem;height: 4rem" fit="cover" :src="tf.row.b64"   ></el-image>
                                                </div>
                                                <div>
                                                    <el-select @change="renderList(...arguments,tf,scope.$index,'bqList')" v-model="tf.row.type" :prop="'bqList.'+scope.$index+'imgUrls.'+tf.$index+'.type'" :rules="{required:true,message:'请选择文件的类型',trigger:'blur'}">
                                                        <el-option v-for="v in filetype" :key="v.value" :label="v.value" :value="v.key"></el-option>
                                                    </el-select>
                                                </div>
                                                <div>
                                                    <el-button size="mini" type="danger" @click="unselectimage(tf.$index,tf.row,scope.$index,'bqList')">删除</el-button>
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column >


                                </el-table>

                            </div>


                            <div v-else-if="scope.row.type === 7">
                                <el-form-item label="权属人"  :prop="'bqList.'+scope.$index+'.QSR'" :rules="rules.QSR">
                                    <el-select
                                            v-model="scope.row.QSR"
                                            filterable
                                            allow-create
                                            default-first-option
                                            @blur="onInputQSR(...arguments ,scope.row,false)"
                                            placeholder="请选择或输入权属人">
                                        <el-option
                                                v-for="item in bgList"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>


                                <el-form-item label="具体内容"  :prop="'bqList.'+scope.$index+'.content.CCMC'" :rules="rules.CCMC">
                                    <el-input type="textarea" v-model="scope.row.content.CCMC"></el-input>
                                </el-form-item>

                                <el-form-item label="查封金额"  :prop="'bqList.'+scope.$index+'.content.DJJE'" :rules="rules.DJJE">
                                    <el-input v-model="scope.row.content.DJJE" type="number">
                                        <template slot="suffix">元</template>
                                    </el-input>
                                </el-form-item>



                                <el-form-item label="保全类型"  :prop="'bqList.'+scope.$index+'.bqlx'" :rules="rules.bqlx">
                                    <el-radio-group v-model="scope.row.bqlx">
                                        <el-radio :label="1">查封/冻结</el-radio>
                                        <el-radio :label="2">解除</el-radio>
                                        <el-radio :label="3">续封/续冻</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item v-if="scope.row.bqlx === 3" label="续封到期日"  :prop="'bqList.'+scope.$index+'.xfdqr'"  :rules="rules.xfdqr">
                                    <el-date-picker
                                            v-model="scope.row.xfdqr"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>


                                <el-form-item label="线索附件" style="margin-bottom: 0">
                                    <div >
                                        <el-button type="primary" size="mini"  @click.stop="addPic('bqList',scope.$index)">选择文件</el-button>
                                        <p style="color: red;font-size: 1.5rem">
                                            请在此处上传该标的的线索资料
                                        </p>
                                    </div>

                                    <div>
                                        <div style="color: red" v-for="v in onRenderTip(scope.$index,'bqList')" :key="v.key">
                                            缺少：{{ v.value }}
                                        </div>
                                    </div>

                                </el-form-item>
                                <el-table :data="scope.row.imgUrls" :show-header="false" :border="false">
                                    <el-table-column >
                                        <template slot-scope="tf">
                                            <div class="p-flex">
                                                <div style="width: 2rem">{{ tf.$index+1 }}</div>
                                                <div>
                                                    <el-image style="width:4rem;height: 4rem" fit="cover" :src="tf.row.b64"   ></el-image>
                                                </div>
                                                <div>
                                                    <el-select @change="renderList(...arguments,tf,scope.$index,'bqList')" v-model="tf.row.type" :prop="'bqList.'+scope.$index+'imgUrls.'+tf.$index+'.type'" :rules="{required:true,message:'请选择文件的类型',trigger:'blur'}">
                                                        <el-option v-for="v in filetype" :key="v.value" :label="v.value" :value="v.key"></el-option>
                                                    </el-select>
                                                </div>
                                                <div>
                                                    <el-button size="mini" type="danger" @click="unselectimage(tf.$index,tf.row,scope.$index,'bqList')">删除</el-button>
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column >


                                </el-table>
                            </div>
                        </template>
                    </el-table-column>

                </el-table>


            </el-form>
        </el-card>


        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-row>
                    <span class="card-header">担保财产信息</span>
                </el-row>
                <el-row style="display: flex;align-items: center;padding: 1rem 0">

                    <el-radio-group  v-model="has_baohan" style="flex-grow: 1;height: 3rem;line-height: 3rem" class="">
                        <el-radio :label="false">无保函</el-radio>
                        <el-radio :label="true">有保函</el-radio>
                    </el-radio-group>

                    <div style="flex-grow: 1;height: 3rem">
                        <el-dropdown  v-if="!has_baohan" class="" @command="handleAddDbCommand">
                            <el-button size="mini" type="primary">
                                填写保全标的<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown" >
                                <el-dropdown-item :command="1">房产</el-dropdown-item>
                                <el-dropdown-item :command="2">车辆</el-dropdown-item>
                                <el-dropdown-item :command="3">银行</el-dropdown-item>
                                <el-dropdown-item :command="4">动产</el-dropdown-item>
                                <el-dropdown-item :command="5">股权</el-dropdown-item>
                                <el-dropdown-item :command="7">第三人债权</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>


                </el-row>

            </div>
            <el-form  :model="$data"  label-width="auto" ref="dbList">

                <div v-if="!has_baohan">


                    <el-table :border="true" :data="dbList" :show-header="false">


                        <el-table-column label="财产信息">
                            <template slot-scope="scope">
                                <el-form-item style="font-weight: bold" :label="(scope.$index+1)+'.'+ getTypeStr(scope.row.type)">

                                    <el-button  size="mini" type="danger" @click="removeItem('dbList',scope.row,scope.$index)">删除</el-button>

                                </el-form-item>
                                <div v-if="scope.row.type === 1">
                                    <el-form-item label="权属人"  :prop="'dbList.'+scope.$index+'.QSR'" :rules="rules.QSR" >
                                        <el-select
                                                v-model="scope.row.QSR"
                                                filterable
                                                allow-create
                                                default-first-option
                                                @blur="onInputQSR(...arguments ,scope.row)"
                                                @change="addDBR(scope.row)"
                                                placeholder="请选择或输入权属人">
                                            <el-option
                                                    v-for="item in ygList"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="坐落"  :prop="'dbList.'+scope.$index+'.content.ZL'"  :rules="rules.ZL">
                                        <el-input v-model="scope.row.content.ZL"></el-input>
                                    </el-form-item>

                                    <el-form-item label="房产权证号"  :prop="'dbList.'+scope.$index+'.content.QZHM'"  :rules="rules.QZHM">
                                        <el-input v-model="scope.row.content.QZHM"></el-input>
                                    </el-form-item>

                                    <el-form-item label="份额占比"  :prop="'dbList.'+scope.$index+'.content.FEZB'"  :rules="rules.FEZB">
                                        <el-input v-model="scope.row.content.FEZB" ></el-input>
                                    </el-form-item>

                                    <el-form-item label="保全类型"  :prop="'dbList.'+scope.$index+'.bqlx'" :rules="rules.bqlx">
                                        <el-radio-group v-model="scope.row.bqlx">
                                            <el-radio :label="1">查封/冻结</el-radio>
                                            <el-radio :label="2">解除</el-radio>
                                            <el-radio :label="3">续封/续冻</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item v-if="scope.row.bqlx === 3" label="续封到期日"  :prop="'dbList.'+scope.$index+'.xfdqr'"  :rules="rules.xfdqr">
                                        <el-date-picker
                                                v-model="scope.row.xfdqr"
                                                type="date"
                                                value-format="yyyy-MM-dd"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </div>
                                <div v-else-if="scope.row.type === 2">
                                    <el-form-item label="权属人"  :prop="'dbList.'+scope.$index+'.QSR'" :rules="rules.QSR" >
                                        <el-select
                                                v-model="scope.row.QSR"
                                                @blur="onInputQSR(...arguments ,scope.row)"
                                                @change="addDBR(scope.row)"
                                                filterable
                                                allow-create
                                                default-first-option
                                                placeholder="请选择或输入权属人">
                                            <el-option
                                                    v-for="item in ygList"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="车辆品牌" >
                                        <el-input v-model="scope.row.content.CLPP"></el-input>
                                    </el-form-item>

                                    <el-form-item label="车牌号码"  :prop="'dbList.'+scope.$index+'.content.CLHM'" :rules="rules.CLHM">
                                        <el-input v-model="scope.row.content.CLHM"></el-input>
                                    </el-form-item>


                                    <el-form-item label="保全类型"  :prop="'dbList.'+scope.$index+'.bqlx'" :rules="rules.bqlx">
                                        <el-radio-group v-model="scope.row.bqlx">
                                            <el-radio :label="1">查封/冻结</el-radio>
                                            <el-radio :label="2">解除</el-radio>
                                            <el-radio :label="3">续封/续冻</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item v-if="scope.row.bqlx === 3" label="续封到期日"  :prop="'dbList.'+scope.$index+'.xfdqr'"  :rules="rules.xfdqr">
                                        <el-date-picker
                                                v-model="scope.row.xfdqr"
                                                type="date"
                                                value-format="yyyy-MM-dd"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </div>
                                <div v-else-if="scope.row.type === 3">
                                    <el-form-item label="权属人"  :prop="'dbList.'+scope.$index+'.QSR'" :rules="rules.QSR" >
                                        <el-select
                                                v-model="scope.row.QSR"
                                                @blur="onInputQSR(...arguments ,scope.row)"
                                                @change="addDBR(scope.row)"
                                                filterable
                                                allow-create
                                                default-first-option
                                                placeholder="请选择或输入权属人">
                                            <el-option
                                                    v-for="item in ygList"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>


                                    <el-form-item label="银行账户"  :prop="'dbList.'+scope.$index+'.content.KHZH'" :rules="rules.KHZH">
                                        <el-input v-model="scope.row.content.KHZH"></el-input>
                                    </el-form-item>

                                    <el-form-item  label="开户行"  :prop="'dbList.'+scope.$index+'.content.KHH'" :rules="rules.KHH">
                                        <el-input v-model="scope.row.content.KHH"></el-input>

                                    </el-form-item>

                                    <el-form-item label="冻结金额"  :prop="'dbList.'+scope.$index+'.content.DJJE'" :rules="rules.DJJE">
                                        <el-input v-model="scope.row.content.DJJE" type="number">
                                            <template slot="suffix">元</template>
                                        </el-input>
                                    </el-form-item>



                                    <el-form-item label="保全类型"  :prop="'dbList.'+scope.$index+'.bqlx'" :rules="rules.bqlx">
                                        <el-radio-group v-model="scope.row.bqlx">
                                            <el-radio :label="1">查封/冻结</el-radio>
                                            <el-radio :label="2">解除</el-radio>
                                            <el-radio :label="3">续封/续冻</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item v-if="scope.row.bqlx === 3" label="续封到期日"  :prop="'dbList.'+scope.$index+'.xfdqr'"  :rules="rules.xfdqr">
                                        <el-date-picker
                                                v-model="scope.row.xfdqr"
                                                type="date"
                                                value-format="yyyy-MM-dd"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </div>

                                <div v-else-if="scope.row.type === 4">
                                    <el-form-item label="权属人"  :prop="'dbList.'+scope.$index+'.QSR'" :rules="rules.QSR" >
                                        <el-select
                                                v-model="scope.row.QSR"
                                                @blur="onInputQSR(...arguments ,scope.row)"
                                                @change="addDBR(scope.row)"
                                                filterable
                                                allow-create
                                                default-first-option
                                                placeholder="请选择或输入权属人">
                                            <el-option
                                                    v-for="item in ygList"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="具体内容"  :prop="'dbList.'+scope.$index+'.content.CCMC'" :rules="rules.CCMC">
                                        <el-input type="textarea" v-model="scope.row.content.CCMC"></el-input>
                                    </el-form-item>


                                    <el-form-item label="保全类型"  :prop="'dbList.'+scope.$index+'.bqlx'" :rules="rules.bqlx">
                                        <el-radio-group v-model="scope.row.bqlx">
                                            <el-radio :label="1">查封/冻结</el-radio>
                                            <el-radio :label="2">解除</el-radio>
                                            <el-radio :label="3">续封/续冻</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item v-if="scope.row.bqlx === 3" label="续封到期日"  :prop="'dbList.'+scope.$index+'.xfdqr'"  :rules="rules.xfdqr">
                                        <el-date-picker
                                                v-model="scope.row.xfdqr"
                                                type="date"
                                                value-format="yyyy-MM-dd"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </div>

                                <div v-else-if="scope.row.type === 5">
                                    <el-form-item label="权属人"  :prop="'dbList.'+scope.$index+'.QSR'" :rules="rules.QSR" >
                                        <el-select
                                                v-model="scope.row.QSR"
                                                @blur="onInputQSR(...arguments ,scope.row)"
                                                @change="addDBR(scope.row)"
                                                filterable
                                                allow-create
                                                default-first-option
                                                placeholder="请选择或输入权属人">
                                            <el-option
                                                    v-for="item in ygList"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="企业名称"  :prop="'dbList.'+scope.$index+'.content.QYMC'" :rules="rules.QYMC">
                                        <el-input v-model="scope.row.content.QYMC"></el-input>
                                    </el-form-item>

                                    <el-form-item label="冻结比例"  :prop="'dbList.'+scope.$index+'.content.DJBL'" :rules="rules.DJBL" >
                                        <el-input v-model="scope.row.content.DJBL" type="number" @blur="(event)=>{handleInputDJBL(event,scope.row)}">
                                            <template slot="suffix">
                                                %
                                            </template>
                                        </el-input>
                                    </el-form-item>


                                    <el-form-item label="保全类型"  :prop="'dbList.'+scope.$index+'.bqlx'" :rules="rules.bqlx">
                                        <el-radio-group v-model="scope.row.bqlx">
                                            <el-radio :label="1">查封/冻结</el-radio>
                                            <el-radio :label="2">解除</el-radio>
                                            <el-radio :label="3">续封/续冻</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item v-if="scope.row.bqlx === 3" label="续封到期日"  :prop="'dbList.'+scope.$index+'.xfdqr'"  :rules="rules.xfdqr">
                                        <el-date-picker
                                                v-model="scope.row.xfdqr"
                                                type="date"
                                                value-format="yyyy-MM-dd"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </div>


                                <div v-else-if="scope.row.type === 7">
                                    <el-form-item label="权属人"  :prop="'dbList.'+scope.$index+'.QSR'" :rules="rules.QSR">
                                        <el-select
                                                v-model="scope.row.QSR"
                                                filterable
                                                allow-create
                                                default-first-option
                                                @blur="onInputQSR(...arguments ,scope.row,false)"
                                                placeholder="请选择或输入权属人">
                                            <el-option
                                                    v-for="item in bgList"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>


                                    <el-form-item label="具体内容"  :prop="'dbList.'+scope.$index+'.content.CCMC'" :rules="rules.CCMC">
                                        <el-input type="textarea" v-model="scope.row.content.CCMC"></el-input>
                                    </el-form-item>

                                    <el-form-item label="查封金额"  :prop="'dbList.'+scope.$index+'.content.DJJE'" :rules="rules.DJJE">
                                        <el-input v-model="scope.row.content.DJJE" type="number">
                                            <template slot="suffix">元</template>
                                        </el-input>
                                    </el-form-item>



                                    <el-form-item label="保全类型"  :prop="'dbList.'+scope.$index+'.bqlx'" :rules="rules.bqlx">
                                        <el-radio-group v-model="scope.row.bqlx">
                                            <el-radio :label="1">查封/冻结</el-radio>
                                            <el-radio :label="2">解除</el-radio>
                                            <el-radio :label="3">续封/续冻</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item v-if="scope.row.bqlx === 3" label="续封到期日"  :prop="'dbList.'+scope.$index+'.xfdqr'"  :rules="rules.xfdqr">
                                        <el-date-picker
                                                v-model="scope.row.xfdqr"
                                                type="date"
                                                value-format="yyyy-MM-dd"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </el-form-item>


                                </div>

                            </template>
                        </el-table-column>


                    </el-table>
                </div>

                <div v-else>
                    <el-table :data="bhList" :border="true" :show-header="false" >

                        <el-table-column width="100">
                            <template>
                                {{'保函'}}
                            </template>
                        </el-table-column>

                        <el-table-column>
                            <template slot-scope="scope">
                                <el-form-item label="担保人"  :prop="'bhList.'+scope.$index+'.DJJG'" :rules="rules.DBR">
                                    <el-input v-model="scope.row.DJJG"></el-input>
                                </el-form-item>

                                <el-form-item label="保单号" >
                                    <el-input v-model="scope.row.content.BDH"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>

                    </el-table>
                </div>

            </el-form>
        </el-card>

        <el-card v-if="dbrList.length>0" class="box-card">
            <div slot="header" class="clearfix">
                <span class="card-header">担保人信息</span>
            </div>
            <el-form ref="dbrList" :rules="rules" :model="$data">

                <el-table class="mb2" :data="dbrList" :border="true" :show-header="false" label-width="auto">

                    <el-table-column label="担保人信息" >
                        <template slot-scope="scope">
                            <el-form-item label=" ">
                                <el-button class="fr" size="mini" @click="onRemoveDbr(scope.row)" type="danger">删除</el-button>
                            </el-form-item>
                            <el-form-item label="姓名"   :prop="'dbrList.'+scope.$index+'.XM'" :rules="rules.XM">
                                <el-input v-model="scope.row.XM"></el-input>
                            </el-form-item>
                            <el-form-item label="身份证号码"    :prop="'dbrList.'+scope.$index+'.ZJHM'" :rules="rules.ZJHM">
                                <el-input v-model="scope.row.ZJHM"  @input="parseZJHM(scope.row)"></el-input>
                            </el-form-item>

                            <el-form-item label="性别"   :prop="'dbrList.'+scope.$index+'.XB'" :rules="rules.XB">
                                <el-radio-group v-model="scope.row.XB">
                                    <el-radio label="男">男</el-radio>
                                    <el-radio label="女">女</el-radio>
                                </el-radio-group>
                            </el-form-item>

                            <el-form-item label="民族"    :prop="'dbrList.'+scope.$index+'.MZ'" :rules="rules.MZ">
                                <MZ v-model="scope.row.MZ"></MZ>
                            </el-form-item>


<!--                            <el-form-item label="出生日期"    :prop="'dbrList.'+scope.$index+'.CSRQ'" :rules="rules.CSRQ">-->
<!--                                <BirthdayPicker v-model="scope.row.CSRQ" @change="(v)=>{ return onBirthdayChange(v,scope.row); }"></BirthdayPicker>-->
<!--                            </el-form-item>-->
                            <el-form-item label="出生日期" label-width="20%" ::prop="'dbrList.'+scope.$index+'.CSRQ'" :rules="rules.CSRQ">
                                <el-date-picker
                                        v-model="scope.row.CSRQ"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>


                            <el-form-item label="联系电话"   :prop="'dbrList.'+scope.$index+'.DH'" :rules="rules.DH">
                                <el-input v-model="scope.row.DH"></el-input>
                            </el-form-item>

                            <el-form-item label="住址"    :prop="'dbrList.'+scope.$index+'.DZ'" :rules="rules.DZ">
                                <el-input v-model="scope.row.DZ"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>


                </el-table>


            </el-form>
        </el-card>



        <el-row>
            <el-row>
                <el-button style="width: 100%"   type="primary" @click="next">下一步</el-button>
            </el-row>
        </el-row>
    </div>
</template>

<script>
    import copy from "fast-copy";
    import {mapActions, mapState} from "vuex";
    import  format from '@/utils/format';
    import MZ from '@/components/Form/MZ';
    import IDValidator from "id-validator";
    import moment from "moment";
    import BirthdayPicker from "@/components/Form/BirthdayPicker";
    import $rules from '@/components/Form/data/rules'
    import validator from "@/validator/person";

    export default {
        name: "Property",
        components:{
          MZ,BirthdayPicker
        },
        data(){

            return{
                ficon:require('@/assets/images/file.png'),
                has_baohan: false,
                loading:false,

                activeItem:null, //当前要上传图片的项
                activeTarget:null,//哪个数组
                trialFile: [],
                bhList:[
                    {
                        DJJG:"",
                        content:{
                            "BDH":"",
                        },
                        type:6,
                        cc_type:2
                    }
                ],//保函

                bqList: [],

                dbList:[],

                dbrList: [],//担保人
                filetype:[],

                rules:{
                    ...$rules,
                    ZL:{required:true,message:"坐落不能为空",trigger:'blur'},
                    QZHM:{required:true, validator:function(rule,value,callback){
                            if(!value ||  value === ""){
                                return callback(new Error("请输入9位房产权证号"))
                            }
                            callback()
                        },trigger:'blur'},
                    FEZB:{required:true,message:"份额占比不能为空",trigger:'blur'},
                    CLHM:{required:true,validator:function(rule,value,callback){
                            if (!value || !validator.CPHM(value)) {
                                return callback(new Error("请输入正确的车牌号码"))
                            }
                            callback()
                        },trigger:'blur'},
                    KHZH:{required:true,validator:function(rule,value,callback){
                            if (!value || !validator.KHZH(value)) {
                                return callback(new Error("请输入正确的银行卡号"))
                            }
                            callback()
                        },trigger:'blur'},
                    KHH: {required:true,message:"开户行不能为空",trigger:'blur'},
                    DJJE:{required:true,message:"冻结金额不能为空",trigger:'blur'},
                    CCMC:{required:true,message:"动产具体内容不能为空",trigger:'blur'},
                    QYMC:{required:true,message:"企业名称不能为空",trigger:'blur'},
                    DJBL:{required:true,message:"冻结比例不能为空",trigger:'blur'},
                    DBR:{required:true,message:"担保人不能为空",trigger:'blur'},
                    bqlx: {required: true, message: "保全类型不能为空", trigger: 'blur'},
                    xfdqr: {required: true, message: "续封到期日不能为空", trigger: 'blur'},
                }
            }
        },

        computed: {
            ...mapState([
                'AH','step','submitData','LABD','ygList','bgList'
            ]),


            getBankList(){
                return [];
            },

        },


        watch:{
           AH(nv,ov){
               if (nv !== "") {
                   this.getList();
                   this.getImageList()
               }
           },


        },

        created(){
            // if (this.AH !== "") {
            //     this.getList();
            // }
            this.$api.getFileType()
                .then(res=>{
                    let t = [];
                    res.data.forEach(v=>{
                        t.push({ value:v.type,key:v.trial_file_type_id})
                    })
                    this.filetype = t;
                })
        },

        methods:{

            ...format,


            ...mapActions([
                'setStep','setSubmitData'
            ]),



            renderList(v,r,index, arr) {
                r.row.type_str  = this.getFileType(v).value
                this[arr] = copy(this[arr]);

            },



            getImageList(){

                this.$api.getImageList({AH:this.AH})
                    .then(res=>{
                        let imgUrls = [];
                        res.data.map((v)=>{
                            imgUrls.push({status : 1,type:v.type,b64:v.b64,id:v.id,type_str:this.getFileType(v.type).value })
                        });
                        this.trialFile = imgUrls;
                    })
            },


            onRenderOtherTip(){


                let need = [];

                if(this.trialFile){
                    need = need.filter((v,i)=>{
                        return (-1 === this.trialFile.findIndex((vv,ii)=>{return vv.type === v }))
                    })
                }

                need = this.filetype.reduce((t,v,i)=>{

                    if(-1 !== need.findIndex((vv,ii)=>{ return vv === v.key })){
                        t.push(v)
                    }
                    return t;
                },[])

                return need;
            },


            onRenderTip(index ,arr){

                let row = this[arr][index];
                row.tip = row.tip || [];

                let need = [];
                if (row.cc_type === 1) {
                    //保全财产
                    switch (row.type) {
                        case 1:
                            //房产
                            if (row.bqlx === 1) {
                                //查封
                                need = [2]
                            }else if (row.bqlx === 2) {
                                //解除
                                need  = []
                            }else if (row.bqlx === 3) {
                                //续封
                                need = [2,8]
                            }
                            break;
                        case 2:
                            if (row.bqlx === 1) {
                                //查封
                                need = [3]
                            }else if (row.bqlx === 2) {
                                //解除
                                need  = []
                            }else if (row.bqlx === 3) {
                                //续封
                                need = [3,8]
                            }
                            break;
                        case 3:
                            if (row.bqlx === 1) {
                                //查封
                                need = [9]
                            }else if (row.bqlx === 2) {
                                //解除
                                need  = []
                            }else if (row.bqlx === 3) {
                                //续封
                                need = [9,8]
                            }
                            break;
                        case 4:
                            if (row.bqlx === 1) {
                                //查封
                                need = [4]
                            }else if (row.bqlx === 2) {
                                //解除
                                need  = []
                            }else if (row.bqlx === 3) {
                                //续封
                                need = [4,8]
                            }
                            break;
                        case 5:
                            if (row.bqlx === 1) {
                                //查封
                                need = [5]
                            }else if (row.bqlx === 2) {
                                //解除
                                need  = []
                            }else if (row.bqlx === 3) {
                                //续封
                                need = [5,8]
                            }
                            break;
                        case 7:
                            if (row.bqlx === 1) {
                                //查封
                                need = []
                            }else if (row.bqlx === 2) {
                                //解除
                                need  = []
                            }else if (row.bqlx === 3) {
                                //续封
                                need = [8]
                            }
                            break;
                    }

                }else if(row.cc_type === 2){
                    //担保财产

                }else{
                    //其他材料
                    need = [1]
                }
                if(row.imgUrls ){
                    need = need.filter((v,i)=>{
                        return (-1 === row.imgUrls.findIndex((vv,ii)=>{return vv.type === v }))
                    })


                }

                need = this.filetype.reduce((t,v,i)=>{

                    if(-1 !== need.findIndex((vv,ii)=>{ return vv === v.key })){
                        t.push(v)
                    }
                    return t;
                },[])

                return need;
            },





            //--------------------------------------------------------------上传
            onSelectFile() {

                this.$refs.f1.value = '';
            },

            onSelectOtherFile() {

                this.$refs.f2.value = '';
            },

            /**
             * 取消选择
             * **/
            unselectimage(index, item,i,arr) {
                let nArr = copy(this[arr]);
                nArr[i].imgUrls = nArr[i].imgUrls.filter((v,i)=>{return i !== index})
                this[arr] = nArr
            },

            unselectOtherImage(index) {
                let nArr = copy(this.trialFile);
                nArr  = nArr.filter((v,i)=>{return i !== index})
                this.trialFile = nArr
            },

            /**
             * 一键上传
             */
            async postAllFile(urls) {

                if (urls.length === 0) {
                    this.$message({
                        type: 'warning',
                        message: '请选择文件'
                    })
                } else {

                    this.loading = true;
                    let imgUrlsNew = [];
                    let promiseArr = [];

                    let p = null;

                    for (let i = 0;i< urls.length;i++) {
                        p = urls[i];
                        if (p.status === 0 || p.status === 2) {
                            if(p.type === ""){
                                alert('请选择文件类型再上传')
                                this.loading = false
                                return false;
                            }
                        }
                    }

                    for (let i = 0;i< urls.length;i++) {
                        p = urls[i];
                        if (p.status === 0 || p.status === 2) {
                            promiseArr.push( this.postFile(p.file))
                        } else{
                            promiseArr.push(Promise.resolve(p.status))
                        }
                    }

                    try{
                        let [successCount , failCount] = [0,0];
                        let values = await Promise.all(promiseArr.map(p=> p.catch(e=>e)))
                        values.map((res,i) =>{

                            let img = copy(urls[i]);

                            if(typeof(res) !== 'number' ){

                                if ( res.code === 1) {
                                    img.status = 1;//上传成功
                                    img.id = res.data.id;
                                    successCount++;
                                } else {
                                    img.status = 2;//上传失败
                                    failCount++;
                                }

                            }

                            imgUrlsNew.push(img)
                        });

                        urls = imgUrlsNew;
                        if (successCount === 0 && failCount === 0) {
                            this.$message({
                                type: 'warning',
                                message: `无待上传的文件`
                            });
                        }else{
                            this.$message({
                                type: failCount>0?'warning':"success",
                                message: `上传完成，成功：${successCount}个，失败：${failCount}个`
                            });
                        }

                    }catch (e) {
                        console.log(e)
                    }
                    this.loading = false;


                }
            },

            /**
             * 单个上传
             * @param file
             * @returns {Promise<AxiosResponse<any>>}
             */
            postFile(file) {
                let forms = new FormData();
                let configs = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                forms.append('AH',this.AH)
                forms.append('file', file)
                // forms.append('trial_extra_id',this.trialExtraId)
                return this.$api.upload( forms, configs)

            },
            toggleAddPic: function () {
                let vm = this;
                vm.isPhoto = vm.imgUrls.length < 1;
            },
            addPic: function (target , index) {
                this.activeTarget = target
                this.activeItem = index;
                this.$refs.f1.click();
                return false;
            },

            addOtherPic:function(){
                this.$refs.f2.click();
                return false;
            },

            onFileChange: function (e) {

                var files = e.target.files || e.dataTransfer.files;
                if (!files.length) return;

                this.createImage(files, e);
            },

            onOtherFileChange: function (e) {

                var files = e.target.files || e.dataTransfer.files;
                if (!files.length) return;

                this.createOtherImage(files, e);
            },

            getFileType:function(key){
                return this.filetype.find((v)=>{return v.key === key})
            },

            createOtherImage: function (file, e) {

                for(let i = 0;i< file.length;i++){
                    this.postFile(file[i]).then(res => {
                        console.log(res)
                        console.log(file[i])
                        let b64 = res.data.url
                        if (!file[i].type.includes('image')) {
                            b64 = this.ficon;
                        }
                        this.trialFile.push({
                            b64:b64,
                            status:1,
                            type:7,
                            id:res.data.id,
                            type_str: this.getFileType(7).value
                        })

                    }).catch(res=>{
                        console.log(res)
                        this.$message({
                            type: 'warning',
                            message:res.data
                        })
                    })
                }
            },

            createImage: function (file, e) {

                let pp = copy(this[this.activeTarget]);
                let p = pp[this.activeItem]
                p.imgUrls = p.imgUrls || [];

                for(let i = 0;i< file.length;i++){

                    this.postFile(file[i]).then(res => {
                        console.log(res)
                        console.log(file[i])
                        let b64 = res.data.url
                        if (!file[i].type.includes('image') ) {
                            b64 = this.ficon;
                        }
                        p.imgUrls.push({
                            b64:b64,
                            status:1,
                            type:7,
                            id:res.data.id,
                            type_str: this.getFileType(7).value
                        });
                        this[this.activeTarget] = pp;
                    }).catch(res=>{
                        console.log(res)
                        this.$message({
                            type: 'warning',
                            message:res.data
                        })
                    })
                }
            },
            //----------------------------------------------------------------------

            //保全类型变化
            onBqlxChange(v,row) {

            },


            unselect(index, item) {

                if(item.id && item.id !== ""){

                    this.$api.deleteImage({id:item.id,AH:this.AH,})
                        .then(res=>{
                            this.imgUrls.splice(index, 1);
                        })
                }else{
                    this.imgUrls.splice(index, 1);
                }
            },

            onTrialExtraTypeChange(v){
                this.$api.getDb({AH:this.AH})
                    .then(res=>{
                        let a = [];
                        res.data.dbrList.map(v=>{
                            a.push(v.content)
                        })
                        this.dbrList = a;
                       // this.dbrList = res.data.dbrList;
                        if (res.data.bhList.length > 0) {
                            this.bhList = res.data.bhList;
                        }
                        this.dbList = res.data.dbList;
                    })
            },

            handleInputDJBL(event,row){
                let DJBL = parseInt(row.content.DJBL);

                if (!DJBL || isNaN(DJBL) || DJBL > 100 || DJBL < 0) {
                    row.content.DJBL = "";
                }
            },



            next(){

                let task = [];

                task.push(new Promise((resolve,reject)=>{
                    if (this.bqList.length > 0) {
                        resolve()
                    }else{
                        // this.$message({
                        //     type:'warning',
                        //     message:'请填写财产保全信息'
                        // })
                        reject('请填写财产保全信息')
                    }
                }));

                task.push(this.$refs['bqList'].validate());
                if(this.has_baohan){
                    task.push(new Promise((resolve, reject) => {
                        if (this.bhList.length > 0) {
                            resolve();
                        }else{
                            // this.$message({
                            //     type:'warning',
                            //     message:'请填写保函信息'
                            // })
                            reject('请填写保函信息')
                        }
                    }))
                    task.push(this.$refs['dbList'].validate());
                }else{
                    task.push(new Promise((resolve, reject) => {
                        if (this.dbList.length > 0) {
                            resolve();
                        }else{
                            // this.$message({
                            //     type:'warning',
                            //     message:'请填写财产担保信息'
                            // })
                            reject('请填写财产担保信息')
                        }
                    }))
                    task.push(this.$refs['dbList'].validate());
                }
                if (this.dbrList.length > 0) {
                    task.push(this.$refs['dbrList'].validate());
                }
                task.push(new Promise((resolve,reject)=>{

                    let otherTip =  this.onRenderOtherTip();
                    if (otherTip.length) {
                        let message = otherTip.reduce((t,v,i)=>{
                            return t +`<p >缺少：${v.value} 请上传相应的文件并选择相应的文件类型</p>`
                        },`<p>其他材料：</p>`)
                        // this.$message({
                        //     type: 'warning',
                        //     dangerouslyUseHTMLString: true,
                        //
                        //     message
                        // })
                        reject(message);
                    }

                    let bdTip = [];
                    for (let i in this.bqList) {
                        let r = this.onRenderTip(i,'bqList');
                        if (r.length) {
                            bdTip.push(r);
                        }
                    }
                    if (bdTip.length) {
                        let message = bdTip.reduce((t,v,i)=>{

                            return t+ v.reduce((tt,vv,ii)=>{
                                return tt+`<p >缺少: ${vv.value} 请上传相应的文件并选择相应的文件类型</p>`
                            },`<p>标的${i+1}：</p>`)

                        },``)
                        // this.$message({
                        //     type: 'warning',
                        //     dangerouslyUseHTMLString: true,
                        //
                        //     message
                        // })
                        reject(message)
                    }
                    resolve()
                }))

                Promise.all(task)
                    .then(res=>{

                        let sd = this.submitData;

                        sd.has_baohan = this.has_baohan;
                        sd.bhList = this.bhList;
                        sd.dbList = this.dbList;
                        sd.bqList = this.bqList;
                        sd.dbrList = this.dbrList;
                        sd.trialFile = this.trialFile

                        this.setSubmitData(sd)

                        this.setStep(this.step+1)

                    }).catch(err=>{
                        console.log(err)
                    if(err === false){
                            this.$message({
                                type: 'warning',
                                message:'请完善表单资料'
                            })

                    }else{
                        this.$message({
                            type: 'warning',
                            dangerouslyUseHTMLString:true,
                            message:err
                        })
                    }

                     })

            },

            getList(){

                let params = {'AH':this.AH ,'trial_extra_id':this.trialExtraId}

                this.$api.getBaoquanList(params)
                    .then(res=>{

                        res.data.bqList.map(v=>{
                            if (v.imgUrls) {
                                v.imgUrls.map(vv=>{
                                    vv.type_str = this.getFileType(vv.type).value
                                    vv.status = 1
                                })
                            }
                        })
                        this.bqList = res.data.bqList;
                        this.dbList = res.data.dbList;
                       // this.dbrList = res.data.dbrList;
                        let a = [];
                        res.data.dbrList.map(v=>{
                            a.push(v.content);
                        })
                        this.dbrList = a;
                        if(res.data.bhList.length !== 0){
                            this.bhList = res.data.bhList
                            this.has_baohan = true;
                        }else{
                            this.has_baohan = false;
                        }


                    }).catch(err=>{

                    })
            },






            resetFormData(target,callback) {
                let newData = copy(this[target]);

                callback(newData);

                this[target] = newData;
            },

            handleAddBqCommand(command){
                switch (command) {
                    case 1:
                        this.bqList.unshift({
                            QSR: "",
                            content: {
                                ZL: "",
                                FEZB: "",
                                QZHM:""
                            },
                            cc_type:1,
                            type:1
                        })

                        break;
                    case 2:
                        this.bqList.unshift({
                            QSR: "",
                            content: {
                                CLPP: "",
                                CLHM: "",
                            },
                            cc_type:1,
                            type:2
                        })

                        break;
                    case 3:
                        this.bqList.unshift({
                            QSR: "",
                            content: {
                                KHH: "",
                                KHZH: "",
                                DJJE: this.LABD
                            },
                            cc_type:1,
                            type:3
                        })
                        break;
                    case 4:
                        this.bqList.unshift({
                            QSR: "",
                            content: {
                                CCMC:""
                            },
                            cc_type:1,
                            type:4
                        })
                        break;
                    case 5:
                        this.bqList.unshift({
                            QSR: "",
                            content: {
                                QYMC:"",
                                DJBL:""
                            },
                            cc_type:1,
                            type:5
                        })
                        break;

                    case 7:
                        this.bqList.unshift({
                            QSR: "",
                            content: {
                                CCMC:"",
                                DJJE:""
                            },
                            cc_type:1,
                            type:7
                        })
                        break;

                }
            },


            handleAddDbCommand(command){
                switch (command) {
                    case 1:
                        this.dbList.unshift({
                            QSR: "",
                            content: {
                                ZL: "",
                                FEZB: "",
                                QZHM:""
                            },
                            cc_type:2,
                            type:1
                        })

                        break;
                    case 2:
                        this.dbList.unshift({
                            QSR: "",
                            content: {
                                CLPP: "",
                                CLHM: "",
                            },
                            cc_type:2,
                            type:2
                        })

                        break;
                    case 3:
                        this.dbList.unshift({
                            QSR: "",
                            content: {
                                KHH: "",
                                KHZH: "",
                                DJJE: this.LABD
                            },
                            cc_type:2,
                            type:3
                        })
                        break;
                    case 4:
                        this.dbList.unshift({
                            QSR: "",
                            content: {
                                CCMC:""
                            },
                            cc_type:2,
                            type:4
                        })
                        break;
                    case 5:
                        this.dbList.unshift({
                            QSR: "",
                            content: {
                                QYMC:"",
                                DJBL:""
                            },
                            cc_type:2,
                            type:5
                        })
                        break;
                    case 7:
                        this.dbList.unshift({
                            QSR: "",
                            content:{
                                CCMC: "",
                                DJJE:""
                            },
                            cc_type:2,
                            type:7
                        })
                        break;

                }
            },

            removeItem(key,row,index){
                let t = this[key];
                t.splice(index,1)
            },

            //输入权属人
            onInputQSR(event,row,isDb = true){
                let v =  event.target.value
                if (v !== "") {
                    row.QSR = v;
                    isDb && this.addDBR(row)
                }

            },

            addDBR(row){

                let needToAdd = [];
                let flag = false
                this.dbList.map((v,i)=>{
                    if (!(v.QSR.includes(',') || v.QSR.includes('，') || v.QSR.includes('、'))) {
                        //不是共同拥有
                        if(v.QSR === row.QSR)
                            flag = true;
                    }
                });

                if (flag === false) {
                    //不在担保信息中的权属人
                    //判断是否为原告
                    let index = this.ygList.findIndex((vv,ii)=>{
                        return vv.value ===row.QSR
                    });
                    index === -1 &&   needToAdd.push({XM:row.QSR,XB:"",MZ:"",CSRQ:"",DH:"",DZ:""})
                }else{
                    //在担保信息中
                    //是否在担保人列表中

                    let a = this.ygList.findIndex((vv,ii)=>{
                        return vv.value ===row.QSR
                    });
                    if(a === -1){
                        //不是原告
                        a = this.dbrList.findIndex((vv,ii)=>{
                            return vv.XM === row.QSR;
                        });
                        a === -1 &&  needToAdd.push({XM:row.QSR,XB:"",MZ:"",CSRQ:"",DH:"",DZ:""})
                    }
                }


                this.dbrList =this.dbrList.concat(needToAdd);

            },


            onRemoveDbr(row) {
                this.dbrList.splice(row.$index, 1);
            },


            //担保人出生日期变化
            onBirthdayChange(v, row) {
                console.log('onBirthdayChange')
            },

            //解析证件号码
            parseZJHM(row) {
                console.log(row.ZJHM)
                let validator = new IDValidator();
                if (validator.isValid(row.ZJHM)) {
                    let info = validator.getInfo(row.ZJHM);

                    this.resetFormData('dbrList',(v,i)=>{
                        if(v.i === row.$index){
                            if(info.sex === 1){
                                v.XB = '男';
                            }else{
                                v.XB = '女';
                            }
                            let birth =  moment(info.birth)
                            v.CSRQ = birth.format('YYYY-MM-DD')

                            // v.content.CSRQ = {
                            //     "year":birth.year(),
                            //     "month":birth.month()+1,
                            //     "day":birth.date()
                            // }
                        }
                    })
                }
            },
        }
    }
</script>

<style scoped>
    .box-card{margin-bottom:2rem}
    .card-header-right-item{float:right;margin-right: 2rem}
    .card-header{font-size: 2.5rem;}
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .fr{
        float: right;
    }
    .mb10{
        margin-bottom: 10px;
    }
    .p-flex{
        display: flex;
        align-items: center;
    }
    .p-flex>div{
        margin:2px
    }
</style>